<!-- 头部 -->
<template>
  <div class="leftTopBox">
    <div class="flex leftTopBox-top">
      <div class="leftTopBox-left flex-column">
        <div class="">
          <h2 class="policeTitle u-m-b-20"><span>学校报警概况</span></h2>
          <div class="flex">
            <div class="flex-1" v-if="handleData">
              <div class="policeimg-bg">
                <p class="number" >{{handleData.total_count||0}}</p>
                <p class="title">已处理报警</p>
              </div>
              <ul class="flex align-center">
                <li v-for="iv in handleData.list" :key="iv.id">
                  <p class="title">{{iv.name}}</p>
                  <p>{{iv.resort_count}}</p>
                </li>
              </ul>
            </div>
            <div  class="flex-1" v-if="nohandleData">
              <div class="policeimg-bg policeimg-bg2">
                <p class="number" >{{nohandleData.total_count||0}}</p>
                <p class="title">未处理报警</p>
              </div>
              <ul class="flex align-center">
                <li v-for="iv in nohandleData.list" :key="iv.id">
                  <p class="title">{{iv.name}}</p>
                  <p>{{iv.resort_count}}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="u-m-t-10 flex-1" style="overflow: hidden">
          <slot name="bottom" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "topleft",
  data() {
    return {
      handleData:{
        total_count:0,
        list:[]
      },
      nohandleData:{
        total_count:0,
        list:[]
      },
    };
  },
  props:{
    dataVal:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  watch:{
    dataVal:{
      handler:function(val){
        if(val){
          this.handleData=val.handle
          this.nohandleData=val.no_handle
          console.log('top-left')
        }
      },
      deep:true,
      immediate:true
    }
  },

  mounted() {
    
  },
  methods: {
    
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>

.leftTopBox {
  width: 100%;
  height: 100%;
  &-top {
    width: 100%;
    height: 100%;
  }
  &-left {
    width: 100%;
    height: 100%;
    color: #fff;
    ul {
      margin: 10px 0;
      justify-content: space-between;
      flex-wrap: wrap;
      li {
        width: 50%;
        list-style: none;
        p {
          font-size: 20px;
          font-weight: bold;
          color: #25bcf0;
          text-align: center;
        }
        p.title {
          font-size: 14px;
          margin-bottom: 10px;
          font-weight: normal;
          color: #ccc;
        }
      }
    }
    
    .region-echarts {
      width: 100%;
      height: 100% !important;

      .region-echarts_center {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.policeimg-bg{
    width: 80%;
    height: 140px;
    background: url('../../../../../assets/img/policebg.png') no-repeat center;
    background-size: 100% 100%;
    margin: 0 auto;
    text-align: center;
    p.title{
      color: #fff;
      font-size: 18px;
      margin-top: 15px;
    }
    p.number{
      font-size: 30px;
      font-weight: bold;
      color: #fff;
      margin-top: 15px;
      padding-top:10px;
    }
}
.policeimg-bg2{
  background-image: url('../../../../../assets/img/policebg-hui.png');
}
</style>
